<template>
	<view class="goods-detail" :class="themeName">
		<navigator target="miniProgram" open-type="exit" class="backLiving" v-if="isH5==true">返回直播</navigator>
		<image :src="goodsInfo.details_img" class="goodImg"></image>
		<!-- 	<navbar title="商品详情" :background="{ background: `rgba(256,256,256,${percent})` }"
			:titleColor="`rgba(0,0,0,${percent})`" :immersive="true"></navbar> -->
		<!-- 轮播图 -->
		<goods-swiper :images="goodsInfo.goods_image" :video="goodsInfo.video" :video-cover="goodsInfo.video_cover" />
		<view class="infoBox">
			<bubble top="220rpx" :page="2" :discharge="isDischarge"></bubble>
			<!-- 商品基础信息 -->
			<view class="goods-info">
				<view class="lg goods-main">
					<view class="goodsNameBox">
						<view class="goodsType1" v-if="goodsInfo.type==1&&goodsInfo.is_cross==1">
							跨境进口
						</view>
						<view class="goodsType2" v-else-if="goodsInfo.type==1">
							放心好物
						</view>
						<view class="goodsType3" v-else-if="goodsInfo.type==2">
							虚拟商品
						</view>
						<view class="goods-name">
							{{ goodsInfo.name }}
						</view>
					</view>

					<view class="goods-items">
						<view class="goods-item" @tap="showShare = true">
							<u-icon name="share" size="36" />
							<text class="m-t-5 muted xxs">分享</text>
						</view>
						<view class="goods-item" @tap="changeCollect(isGoodsCollect)">
							<template v-if="isGoodsCollect">
								<u-icon name="star-fill" :color="themeColor" size="36" />
							</template>
							<template v-else>
								<u-icon name="star" size="36" />
							</template>
							<text class="m-t-5 muted xxs">收藏</text>
						</view>
					</view>
				</view>
				<!-- 标签 -->
				<view class="priceBox">
					<view class="goodsTag">
						<view class="tagItem" v-for="(item,index) in goodsInfo.tag" :key="index">
							{{item.name}}
						</view>
					</view>
					<!-- 会员价 -->
					<view class="info-header"
						v-if="goodsInfo.member_price !== '' && !!userInfo.id && goodsInfo.member_level.name">
						<view class="vip-name">{{ goodsInfo.member_level.name }}价</view>
						<price :content="goodsInfo.member_price" :weight="500" color="#E0A356" mainSize="48rpx"
							minorSize="48rpx">
						</price>
						<price style="margin-left: 10rpx" color="gray"
							:content="goodsSpecOptions.spec.sell_price || goodsInfo.sell_price" :line-through="true"
							v-if="Number(goodsSpecOptions.spec.sell_price || goodsInfo.sell_price)" />
					</view>
					<!-- 不是会员价 -->
					<view class="flex row-between col-top">
						<view class="flex" v-if="
				        !(
				            goodsInfo.member_price !== '' &&
				            !!userInfo.id &&
				            goodsInfo.member_level.name
				        )
				    ">
							<!-- 原价 -->
							<price :content="goodsSpecOptions.spec.sell_price || goodsInfo.sell_price" main-size="46rpx"
								minor-size="32rpx" fontWeight="bolder" :color="themeColor">
								<view slot="suffix" class="muted line-through m-l-12 xxs">
									<!-- 划线价 -->
									<price :content="
				                    goodsSpecOptions.spec.lineation_price ||
				                    goodsInfo.lineation_price
				                " :line-through="true" v-if="Number(goodsInfo.lineation_price)" />
								</view>
							</price>
						</view>
					</view>
				</view>
			</view>
			<view class="flex muted xs goods-stock">
				<template v-if="goodsInfo.stock_show">
					<view>库存: {{ goodsInfo.total_stock }}</view>
				</template>
				<view class="xiaoliang">销量: {{ goodsInfo.sales_num }}</view>
				<!-- <view>浏览量: {{ goodsInfo.click_num }}</view> -->
			</view>
			<view class="flex discounts" @tap="showCoupons = true" v-if="goodsCouponSpecs.length">
				<block v-for="item in goodsCouponSpecs" :key="item">
					<view class="coupon-tag xxs" v-if="item.condition_type == 1">无门槛¥{{ handleSpot(item.money) }}
					</view>
					<view class="coupon-tag xxs" v-if="item.condition_type == 2">
						满¥{{ handleSpot(item.condition_money) }}减¥{{
			            handleSpot(item.money)
			        }}</view>
					<view class="coupon-tag xxs" v-if="item.condition_type == 3">
						满¥{{ handleSpot(item.condition_money) }}打{{
			            handleSpot(item.discount_ratio)
			        }}折</view>
				</block>
				<view style="margin-left: auto" :style="{ color: themeColor }">
					<text>领券</text>
					<u-icon name="arrow-right" class="muted nr" :style="{ color: themeColor }" />
				</view>
			</view>
			<!-- S 优惠券popup -->
			<u-popup v-model="showCoupons" mode="bottom" border-radius="14" :closeable="false"
				:safe-area-inset-bottom="true" mask-close-able>
				<view class="coupons">
					<view class="coupons-header">
						<text>领券</text>
						<u-icon name="close" color="#666666" @tap="showCoupons = false" />
					</view>

					<view class="coupons-main">
						<scroll-view :scroll-y="true" style="height: 700rpx; touch-action: none">
							<view class="coupons-item" v-for="item in goodsCouponList" :key="item.id">
								<coupon-card mode="get" :discount_max_money="item.discount_max_money"
									:discount_ratio="item.discount_ratio" :condition_type="item.condition_type"
									:name="item.name" :money="item.money" :condition="item.condition"
									:time="item.effective_time" :scene="item.use_scene" :coupon-id="item.id"
									:gotten="!!item.is_receive" :button="{
                                    name: '领取',
                                    theme: 'primary',
                                    disable: !!item.is_available
                                }" @button="getCoupon" />
							</view>
							<u-empty v-if="!goodsCouponList.length" text="暂无优惠券"
								src="https://cdn.zkjialan.com/img1/empty/coupon_icon.png" :icon-size="180" />
						</scroll-view>
					</view>
				</view>
			</u-popup>
			<!-- E 优惠券 -->

			<!-- <view class="nr commission flex" v-if="distribution.is_show && distribution.earnings > 0">
				<text class="flex-none">佣金</text>
				<text class="m-l-20" style="color: red">{{ Number(distribution.ratio).toFixed(2) }}%</text>
				<text class="m-l-20 muted">( 预计{{ distribution.earnings }} ) </text>
				<view style="margin-left: auto">
					<view @tap="showShare = true">
						立即分享
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view> -->
			<view class="specification">
				<view class="nr specification-item m-b-50" @click="onGoodsOptions">
					<text class="fontAm flex-none">选择</text>
					<text class="m-l-20 skuline fontAm">已选：{{ specValueStr }}</text>
					<u-icon name="arrow-right" class="muted" style="margin-left: auto" />
				</view>

				<view class="nr specification-item m-b-50" @click="handleSend" v-if="goodsInfo.type == 1">
					<text class="flex-none fontAm">配送</text>
					<view class="m-l-20 fontAm">
						<!-- 无地址 不是跨境商品 -->
						<view v-if="!goodsInfo.address && !goodsInfo.customs">免运费</view>
						<!-- 无地址 是跨境商品 -->
						<view v-else-if="!goodsInfo.address && goodsInfo.customs">免运费 {{goodsInfo.customs}}保税直发</view>
						<!-- 有地址 不是跨境商品 -->
						<view v-else-if="goodsInfo.address && !goodsInfo.customs">
							快递：{{ goodsInfo.free_shipping_tips || '以提交订单时为准' }}</view>
						<!-- 有地址 是跨境商品 -->
						<view v-else-if="goodsInfo.address && goodsInfo.customs">
							快递：{{ goodsInfo.free_shipping_tips || '以提交订单时为准' }} {{goodsInfo.customs}}保税直发</view>
						<!-- <view v-else>快递：{{ goodsInfo.free_shipping_tips || '以提交订单时为准' }}
						</view> -->
						<view class="xs fontAm skuline" v-if="goodsInfo.address">配送至：{{
                            goodsInfo.address.province +
                            ' ' +
                            goodsInfo.address.city +
                            ' ' +
                            goodsInfo.address.district
                        }}
						</view>
						<!-- <view class="xs fontAm skuline" v-if="goodsInfo.is_cross==1"></view> -->
						<view class="xs fontAm skuline" v-if="!goodsInfo.address">请完善地址信息 </view>
					</view>
					<u-icon name="arrow-right" class="fontAm" style="margin-left: auto" />
				</view>
				<!-- S 规格 -->

				<view class="nr specification-item m-b-50" v-if="distribution.is_show && distribution.earnings > 0">
					<text class="fontAm flex-none">佣金</text>
					<text class="m-l-20 skuline fontAm">￥：{{distribution.earnings}}</text>
				</view>
				<view class="nr specification-item m-b-42" @click="showSafeguard = true"
					v-if="goodsInfo.service_guarantee.length">
					<text class="muted flex-none m-r-20">保障</text>
					<view class="skuline">
						<text v-for="(item, index) in goodsInfo.service_guarantee" :key="item.id">{{ item.name
                        }}<text v-show="index != goodsInfo.service_guarantee.length - 1"
								class="m-l-10 m-r-10">·</text></text>
					</view>

					<u-icon name="arrow-right" class="muted" style="margin-left: auto" />
				</view>
			</view>
			<!-- S 保障popup -->
			<u-popup v-model="showSafeguard" mode="bottom" border-radius="14" :closeable="false"
				:safe-area-inset-bottom="true" mask-close-able>
				<view class="coupons">
					<view class="coupons-header">
						<text>保障</text>
						<u-icon name="close" color="#666666" @tap="showSafeguard = false" />
					</view>
					<view class="coupons-main" style="background-color: white">
						<scroll-view :scroll-y="true" style="height: 700rpx; touch-action: none">
							<view class="coupons-item" style="margin-bottom: 40rpx"
								v-for="(item, index) in goodsInfo.service_guarantee" :key="item.id">
								<view style="font-size: 28rpx; font-weight: 500">{{ item.name }}</view>
								<view class="muted m-t-10">{{ item.content }}</view>
							</view>
						</scroll-view>
						<button class="popup-btn" @click="showSafeguard = false">我知道了</button>
					</view>
				</view>
			</u-popup>
			<!-- E 保障 -->
			<!-- 规格选择Popup -->
			<goods-spec v-model="showGoodsSpec" :defaultInfo="{
                min_cover: goodsInfo.min_cover,
                price: goodsInfo.sell_price,
                stock: goodsInfo.total_stock,
                unit: goodsInfo.unit_name,
                limit_type: goodsInfo.limit_type,
                limit_value: goodsInfo.limit_value,
                buy_num: goodsInfo.buy_num,
                cart_goods_num: goodsInfo.cart_goods_num
            }" :reCheck="reCheck" :cartId="cartId" :buttons="specButtonsList" :spec-list="goodsInfo.spec_value"
				:spec-map="goodsInfo.spec_value_list" @buy="handleBuy" @cart="handleCartAdd"
				@change="changeGoodsSpec" />
			<!-- E 规格 -->
			<image src="https://cdn.zkjialan.com/img/product/baosui.png" class="baosui" v-if="goodsInfo.is_cross==1">
			</image>
			<!-- diy -->
			<!-- 评论 -->
			<view v-for="(item, index) in pagesData" :key="index">
				<template v-if="item.name == 'reviews'">
					<w-reviews v-if="item.show" :content="item.content" :styles="item.styles" :comment="goodsComment"
						:goods-id="goods_id" :total="goodsInfo.goods_comment_count" />
				</template>
				<!-- <template v-if="item.name == 'goodsrecom'">
                <w-goodsrecom v-if="item.show" :content="item.content" :styles="item.styles" />
            </template> -->
			</view>

			<!-- 商品介绍 -->
			<view class="detail">
				<!-- <view class="detail-title nr">详情</view> -->
				<image src="https://cdn.zkjialan.com/img/index/productDetails.png" class="productDetails"></image>
				<u-parse :html="goodsInfo.content" :show-with-animation="true"></u-parse>
			</view>
			<!-- 商品下架提示语 -->
			<view class="goodDown" v-if="!goodsInfo.status">
				<view class="goodDown-text">商品已经下架啦~要不要瞧瞧别的~ </view>
			</view>

			<!-- 功能按钮组 -->
			<view class="functions">
				<view class="icon-group fontAr">
					<view class="icon-item" @tap="goHome">
						<u-icon name="home" size="42" />
						<text class="fontAr">首页</text>
					</view>
					<view class="icon-item fontAr" @tap="$openCuster()">
						<u-icon name="kefu-ermai" size="42" />
						<text class="fontAr">客服</text>
					</view>
					<view class="icon-item fontAr" @tap="goCart">
						<u-badge :count="cartNum" :offset="[-10, -10]"></u-badge>
						<u-icon name="shopping-cart" size="42" />
						<text class="fontAr">购物车</text>
					</view>
				</view>
				<view class="button-group">
					<!-- <view class="button-item button-item--cart fontAm" @click="onCart" v-if="goodsInfo.is_cross == 0"
						:style="{ opacity: goodsInfo.status == 0 ? 0.5 : 1 }">加入购物车</view> -->
					<view class="button-item button-item--cart fontAm" @click="onCart"
						:style="{ opacity: goodsInfo.status == 0 ? 0.5 : 1 }">加入购物车</view>


					<view class="button-item button-item--buy fontAm" @click="onBuy"
						:style="{ opacity: goodsInfo.status == 0 ? 0.5 : 1 }">立即购买</view>
				</view>
			</view>

			<share-popup v-model="showShare" :share-id="goods_id" pagePath="pages/goods_detail/goods_detail" :type="1"
				:poster_img="goodsInfo.poster" :config="{
                name: goodsInfo.name,
                image: goodsInfo.image
            }" />
			<!-- 页面状态 -->
			<page-status :status="pageStatus">
				<template #error>
					<u-empty :text="pageErrorMsg" src="https://cdn.zkjialan.com/img1/empty/shop.png"
						:icon-size="280"></u-empty>
				</template>
			</page-status>
			<u-back-top :scroll-top="scrollTop" :top="1000" :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }">
			</u-back-top>
		</view>
	</view>
</template>

<script>
	import {
		apiGoodsDetail
	} from '@/api/goods'
	import {
		apiCartAdd,
		apiCouponGet,
		apiCartNum
	} from '@/api/store'
	import {
		apiGoodsCollect,
		apiGoodsMarketing,
		apicheckCanBuy
	} from '@/api/goods'
	import {
		baseURL,
		basePath
	} from '@/config/app'
	import {
		apiGetPage
	} from '@/api/store'
	import {
		PageStatusEnum,
		OrderTypeEnum
	} from '@/utils/enum'
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		strToParams
	} from '@/utils/tools'
	import {
		apiAddressLists
	} from '@/api/user'
	export default {
		name: 'GoodsDetail',

		data() {
			return {
				addressId: '',
				addressList: [],
				isDischarge: false,
				// 页面状态
				pageStatus: PageStatusEnum['LOADING'],
				pagesData: [],
				pageErrorMsg: '', // 页面异常信息
				scrollTop: 0,
				percent: 0,
				showShare: false,
				goodsInfo: {
					free_shipping_tips: '',
					service_guarantee: [],
					member_level: {},
					address: {}
				}, // 商品信息
				goodsComment: {}, // 用户评价
				goods_id: '', // 商品ID
				showSafeguard: false, //保障 ：显示｜隐藏
				isGoodsCollect: false, // 商品收藏

				showGoodsSpec: false, // 商品规格: 显示 | 隐藏
				showCoupons: false, // 领券：显示 | 隐藏

				goodsSpecOptions: {
					spec: {}
				}, // 已选商品规格
				specButtonsList: [], // 规格按钮
				goodsCouponList: [], // 优惠券列表

				goodsCouponActive: '', // 使用的优惠券
				// 规格按钮组
				specButtonsGroups: {
					buy: {
						event: 'buy',
						text: '立即购买'
					},
					cart: {
						event: 'cart',
						text: '加入购物车'
					}
				},
				distribution: {},
				reCheck: 0, //标识购物车内重选
				cartId: 0,
				isH5: false,
				category_id: '',
				goods_isCross: '' //购物车第一个商品是否是跨境商品
			}
		},

		computed: {
			...mapGetters(['isLogin']),
			...mapState({
				cartNum: (state) => state.cart.cartNum
			}),
			// 优惠券【视图】
			goodsCouponSpecs() {
				// 展示数量
				const COUNT = 2
				const coupons = this.goodsCouponList
				// 优惠券列表数量
				const Len = coupons.length
				// 承载容器
				const payload = []

				for (let i = 0; i < COUNT && i <= Len - 1; ++i) {
					const value = coupons[i]
					payload.push(value)
				}

				return payload
			},

			// 已选商品规格
			specValueStr() {
				return this.goodsSpecOptions?.spec?.spec_value_str ?? ''
			},

			// 优惠券小数处理
			handleSpot() {
				return (val) => {
					let result = val
					let decimalsArr = val.split('.')
					if (decimalsArr[1] == '00') {
						result = decimalsArr[0] //5.00形式=>5
					} else if (decimalsArr[1] != '00' && decimalsArr[1] % 10 == 0) {
						result = decimalsArr[0] + decimalsArr[1].substr(0, decimalsArr[1].length - 1) //5.10形式=>5.1
					}
					return result
				}
			}
		},

		methods: {
			// 获取地址列表
			apiAddressListsFun() {
				apiAddressLists().then((res) => {
					this.addressList = res
					console.log(res)
				})
			},
			// 获取装修页面
			getPage() {
				apiGetPage({
					type: 5,
					goods_id: this.goods_id
				}).then((data) => {
					const {
						common,
						content
					} = data

					this.pagesData = content
					uni.setNavigationBarTitle({
						title: common.title
					})
				})
			},
			// 更改规格
			changeGoodsSpec(options) {
				this.goodsSpecOptions = options
				console.log(options)
			},

			// 点击加入购物车按钮
			onCart() {
				if(this.goods_isCross!=-1){//有商品才判断
					if (this.goodsInfo.is_cross != this.goods_isCross) {
						if (this.goods_isCross) {//购物车有跨境商品
							this.$toast({
								title: '请先结算购物车中跨境商品'
							})
							return;
						} else {
							this.$toast({
								title: '请先结算购物车中非跨境商品'
							})
							return;
						}
					}
				}
				//判断商品下架
				if (this.goodsInfo.status == 0) return
				this.showGoodsSpec = true
				this.specButtonsList = [this.specButtonsGroups.cart]
			},

			// 更改商品收藏状态
			changeCollect(value) {
				value = !!value ? 0 : 1
				if (!this.isLogin) return this.$Router.push('/pages/login/login')

				apiGoodsCollect({
						goods_id: this.goods_id,
						is_collect: value
					})
					.then((data) => {
						this.isGoodsCollect = value
					})
					.catch((err) => {
						console.log(err)
					})
			},

			// 去客服
			// goService() {
			//     this.$Router.push({
			//         path: '/bundle/pages/service/service',
			//         query: {
			//             goods_id: this.goods_id,
			//             type: 'normal'
			//         }
			//     })
			// },
			goHome() {
				this.$Router.replaceAll({
					path: '/pages/index/index'
				})
			},
			// 去购物车
			goCart() {
				this.$Router.replaceAll({
					path: '/pages/shop_cart/shop_cart'
				})
			},

			// 点击立即购买按钮
			onBuy() {
				// 判断商品下架
				if (this.goodsInfo.status == 0) return
				this.showGoodsSpec = true
				this.specButtonsList = [this.specButtonsGroups.buy]
			},

			// 领取优惠券
			getCoupon(id) {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')

				apiCouponGet({
						id
					})
					.then(() => {
						this.$toast({
							title: '领取成功'
						})
						this.initMarketing()
					})
					.catch((err) => {
						console.log(err)
						// this.$toast({ title: '' })
					})
			},

			// 点击已选规格
			onGoodsOptions() {
				this.showGoodsSpec = true
				this.specButtonsList = [{
						...this.specButtonsGroups.cart,
						style: {
							border: `solid 1px ${this.themeColor}`,
							color: this.themeColor,
							backgroundColor: '#FFFFFF'
						}
					},
					this.specButtonsGroups.buy
				]
			},

			// 处理 加入购物车
			handleCartAdd({
				spec,
				number
			}) {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')

				apiCartAdd({
						item_id: spec.id,
						goods_num: number
					})
					.then(() => {
						let categoryName = '营养补剂';
						if (this.category_id == 2) {
							categoryName = '组合配方';
						}
						// 埋点 加入购物车
						// this.$uma.trackEvent('Um_Event_Addcart', {
						// 	Um_Key_ItemName: this.goodsInfo.name,
						// 	Um_Key_ItemID: ''+this.goodsInfo.id,
						// 	Um_Key_ItemCategory: ''+categoryName,
						// 	Um_Key_ItemPrice: parseInt(this.goodsInfo.sell_price) ,
						// 	Um_Key_UserID: ''+this.userInfo.id,
						// 	Um_Key_UserLevel: ''+this.userInfo.level
						// });
						this.$toast({
							title: '已加入购物车'
						})
						this.$store.dispatch('getCartNum')
						// 商品详情数据
						this.initGoodsDetail()
					})
					.catch((err) => {
						throw new Error(err)
					})
			},

			// 处理 立即购买
			handleBuy({
				spec,
				number
			}) {
				const form = this.goodsInfo.type == 1 ? 'GOODS' : 'VIRTUAL'
				this.$Router.push({
					path: '/pages/goods_order/goods_order',
					query: {
						is_cross: this.goodsInfo.is_cross,
						from: OrderTypeEnum[form],
						address_id: this.addressId,
						payload: {
							source: 'buy_now',
							goods: [{
								goods_num: number,
								item_id: spec.id
							}]
						}
					}
				})
			},

			// 初始化商品详情数据
			initGoodsDetail() {
				return new Promise((resolve, reject) => {
					apiGoodsDetail({
							id: this.goods_id,
							visit: 1,
							address_id: this.addressId
						})
						.then((data) => {
							this.goodsInfo = data
							const hasComment = JSON.stringify(data.goods_comment) !== '[]'
							this.goodsComment = hasComment ? data.goods_comment : {}
							this.isGoodsCollect = !!data.is_collect
							this.distribution = this.goodsInfo.distribution
							uni.setNavigationBarTitle({
								title: this.goodsInfo.name,
								success: function() {
									console.log('标题设置成功');
								},
								fail: function(err) {
									console.error('标题设置失败', err);
								}
							});
							return data
						})
						.then((data) => {
							// #ifdef H5
							// 设置分享
							this.$store.dispatch('setWxShare', {
								shareImage: data?.image,
								shareDesc: data?.name
							})
							// #endif
							resolve(data)
						})
						.catch((err) => {
							reject(err)
						})
				})
			},

			// 初始化优惠券
			initMarketing() {
				return new Promise((resolve, reject) => {
					apiGoodsMarketing({
							id: this.goods_id
						})
						.then((data) => {
							this.goodsCouponList = data.coupon
							resolve(data)
						})
						.catch((err) => {
							reject(err)
						})
				})
			},
			handleSend() {
				uni.$once('changeAddress', async (id) => {
					this.addressId = id
					await this.initGoodsDetail()
				})
				this.$Router.push({
					path: '/pages/address/address',
					query: {
						type: 1
					}
				})
			}
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.scrollTop = scrollTop
		},
		async onLoad() {
			const options = this.$Route.query
			this.category_id = options['category_id'];
			//重选规格
			if (options['reCheck'] == 1) {
				//标识购物车购物车内多规格库存不足重选
				(this.reCheck = options['reCheck']), (this.cartId = options['cart_id'])
				setTimeout(() => {
					this.showGoodsSpec = true
				}, 200)
			}

			// 商品ID赋值：点击 | 扫码
			options['scene'] ?
				(this.goods_id = strToParams(options['scene'])['id']) :
				(this.goods_id = options.id)

			try {
				if (!this.goods_id) throw new Error('该商品不存在')
				await this.getPage()
				// 商品详情数据
				await this.initGoodsDetail()
				await this.apiAddressListsFun()
				// 促销
				await this.initMarketing()
				this.pageStatus = PageStatusEnum['NORMAL']
			} catch (err) {
				console.log(err)
				this.pageErrorMsg = err.message
				this.pageStatus = PageStatusEnum['ERROR']
			}
		},

		onShareAppMessage() {
			// const {
			// 	name,
			// 	image
			// } = this.goodsInfo
			// 获取轮播图

			return {
				title: '给你推荐' + this.goodsInfo.name,
				path: `/pages/goods_detail/goods_detail?id=${this.goods_id}&invite_code=${this.userInfo.code}`,
				imageUrl: this.goodsInfo.poster
			}
		},
		onHide() {
			this.isDischarge = true
		},
		async onShow() {
			this.$request.get(`shopapi/cart/lists`).then(res => {
				console.log(res.data.data);
				let data = res.data.data;
				if (data.lists.length > 0) { //购物车有商品
					this.goods_isCross = data.lists[0].goods.is_cross;
				}else{
					this.goods_isCross=-1//没商品
				}
			})
			// 获取场景值判断是否从h5打开 
			let num = uni.getLaunchOptionsSync().scene;
			console.log(num);
			// this.$toast({
			// 	title: num
			// })
			if (num == 1194) {
				this.isH5 = true;
			}
			// await this.getPage();
			// 商品详情数据
			// await this.initGoodsDetail();
			// await this.apiAddressListsFun();
			// await this.initMarketing();
			this.isDischarge = false
		}
	}
</script>

<style lang="scss" scoped>
	.baosui {
		margin-left: 40rpx;
		width: 655rpx;
		height: 105rpx;
	}

	.backLiving {
		position: fixed;
		z-index: 999999;
		top: 25rpx;
		left: 15rpx;
		width: 130rpx;
		height: 40rpx;
		border-radius: 20rpx;
		color: #ffffff;
		font-size: 22rpx;
		text-align: center;
		background-color: #f08329;
		line-height: 40rpx;
		font-family: 'ar';
	}

	/deep/ .nr {
		font-family: 'am' !important;
	}

	.fontAm {
		font-family: 'am';
	}

	.xiaoliang {
		margin-left: 30rpx;
	}

	.fix-pre,
	.integer,
	.price-wrap--disabled {
		font-family: 'ab';
	}

	.priceBox {
		display: flex;
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 30rpx;
		justify-content: space-between;
		align-items: center;
	}

	.infoBox {
		width: 100%;
		background-color: #ffffff;
	}

	.goodsTag {
		width: 350rpx;
		height: 65rpx;
		// margin-top: 30rpx;
		display: flex;
		padding: 20rpx 0 10rpx 0;
		overflow-x: scroll;
		white-space: nowrap;
		text-overflow: ellipsis;

		.tagItem {
			font-size: 19rpx;
			border: 1rpx solid #000000;
			padding: 5rpx;
			margin-right: 10rpx;
			border-radius: 5rpx;
			font-family: 'ab';
		}
	}

	.goodsNameBox {
		display: flex;
		margin-top: 80rpx;
		margin-left: 40rpx;

		.goodsType1 {
			width: 50rpx;
			height: 56rpx;
			background-color: #9B29FF;
			text-align: center;
			font-size: 18rpx;
			color: #ffffff;
			margin-right: 20rpx;
			padding: 1rpx;
			border-radius: 10rpx;
		}

		.goodsType2 {
			width: 50rpx;
			height: 56rpx;
			background-color: #D9531B;
			text-align: center;
			font-size: 18rpx;
			color: #ffffff;
			margin-right: 20rpx;
			padding: 1rpx;
			border-radius: 10rpx;
		}

		.goodsType3 {
			width: 50rpx;
			height: 56rpx;
			background-color: #1071F5;
			text-align: center;
			font-size: 18rpx;
			color: #ffffff;
			margin-right: 20rpx;
			padding: 1rpx;
			border-radius: 10rpx;
		}
	}

	.goodImg {
		position: absolute;
		width: 100%;
		height: 530rpx;
		left: 0rpx;
		top: 0rpx;
		z-index: 999;
	}

	.goods-detail {
		padding-bottom: calc(100rpx + 100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + 100rpx + env(safe-area-inset-bottom));

		.goods-stock {
			margin: 1rpx 20rpx 30rpx 20rpx;
			background-color: #ffffff;
			padding: 20rpx 24rpx;
			border-radius: 0rpx 0rpx 30rpx 30rpx;
		}
	}

	.goods-info {
		position: relative;
		z-index: 99;
		margin-top: -88rpx;
		// margin-left: 40rpx;
		// margin: 0 20rpx 0 20rpx;
		// padding: 20rpx 24rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;

		// 会员价
		.vip-price {
			margin-left: 20rpx;
			margin-top: 5rpx;
			background-color: #ffe9ba;
			color: #ffd4b7;
			line-height: 36rpx;
			border-radius: 6rpx;
			overflow: hidden;

			.price-name {
				background-color: #101010;
				padding: 3rpx 12rpx;
				position: relative;
				overflow: hidden;

				&::after {
					content: '';
					display: block;
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					right: -15rpx;
					background-color: #ffe9ba;
					border-radius: 50%;
					top: 50%;
					transform: translateY(-50%);
					box-sizing: border-box;
				}
			}
		}

		.share {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 134rpx;
			height: 60rpx;
			margin-right: -24rpx;
			border-radius: 30px 0 0 30px;
			background-color: #f6f6f6;
		}

		.goods-main {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0 10rpx 0;

			.goods-name {
				font-weight: 500;
				font-family: 'ab';
				font-size: 34rpx;
			}

			.goods-items {
				flex-shrink: 0;
				width: 150rpx;
				display: flex;
				justify-content: flex-end;
				margin-top: 70rpx;
				margin-right: 40rpx;

				.goods-item {
					font-size: 28rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: 20rpx;
				}
			}
		}
	}

	.discounts {
		display: flex;
		padding: 20rpx 0 10rpx 0;
		// margin-top: 20rpx;
		background-color: #ffffff;
		width: 670rpx;
		margin-left: 40rpx;

		.coupon-tag {
			box-sizing: border-box;
			position: relative;
			display: flex;
			justify-content: center;
			min-width: 140rpx;
			height: 36rpx;
			padding: 0 20rpx;
			border-radius: 4px;
			margin-right: 10rpx;
			color: #ffffff;
			line-height: 36rpx;
			@include background_color();

			&::before,
			&::after {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				display: block;
				content: '';
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #ffffff;
			}

			&::before {
				right: -5rpx;
			}

			&::after {
				left: -5rpx;
			}
		}
	}

	.specification {
		padding: 50rpx 24rpx 1rpx 24rpx;
		border-radius: 30rpx;
		margin: 0rpx 20rpx 30rpx 20rpx;

		background-color: #ffffff;

		.specification-item {
			display: flex;
		}
	}

	.detail {
		padding: 24rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;

		.productDetails {
			width: 440rpx;
			height: 100rpx;
			margin-bottom: 40rpx;
		}

		&-title {
			padding-bottom: 24rpx;
		}

		::v-deep image {
			vertical-align: top;
		}

		// #ifdef H5
		::v-deep img {
			vertical-align: top;
			display: inline;
		}

		// #endif
		// #ifdef MP-WEIXIN || APP-PLUS
		::v-deep ._img {
			vertical-align: top;
			display: inline;
		}

		// #endif
	}

	.functions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 24rpx constant(safe-area-inset-bottom) 24rpx;
		padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
		border-top: $-solid-border;
		background-color: #ffffff;

		.icon-group {
			display: flex;
			justify-content: space-around;
			width: 268rpx;
			font-size: $-font-size-xxs;
			color: $-color-lighter;

			.icon-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.button-group {
			flex: 1;
			display: flex;
			justify-content: space-between;

			.button-item {
				flex: 1;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 74rpx;
				margin-left: 14rpx;
				border-radius: 60px;

				&--cart {
					@include font_color();
					@include border_color();

					border-width: 1px;
					border-style: solid;
				}

				&--buy {
					@include background_color();

					color: #ffffff;
				}
			}
		}
	}

	.coupons {
		background-color: #f6f6f6;

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: 500;
			font-size: $-font-size-md;
			background-color: #ffffff;
		}

		&-main {
			padding: 20rpx;

			.coupons-item {
				&:nth-child(n + 2) {
					margin-top: 20rpx;
				}
			}
		}

		.popup-btn {
			@include background_color();
			color: white;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			margin-top: 25rpx;
		}
	}

	.share-money {
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		color: #7b3e0e;
		background: linear-gradient(90deg, #fdeed8 0%, #fccf9c 100%);
	}

	.goodDown {
		position: fixed;
		bottom: calc(100rpx + env(safe-area-inset-bottom));
		bottom: calc(100rpx + constant(safe-area-inset-bottom));
		height: 88rpx;
		left: 0;
		right: 0;
		background-color: rgba(119, 119, 119, 1);

		&-text {
			line-height: 88rpx;
			text-align: center;
			color: white;
		}
	}

	.commission {
		margin: 0rpx 20rpx 30rpx 20rpx;
		padding: 40rpx 24rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.info-header {
		// background: url(https://cdn.zkjialan.com/img1/vip-bg.png) no-repeat;
		// background: url() no-repeat;
		background-size: contain;

		// height: 240rpx;
		// padding: 30rpx 24rpx;
		.vip-name {
			font-size: 24rpx;
			background-color: #f08329;
			width: 150rpx;
			border-radius: 25rpx;
			text-align: center;
			line-height: 30rpx;
			padding: 5rpx 0;
			margin-bottom: 10rpx;
			position: relative;
			color: #ffffff;
			font-family: 'am';

			&::before {
				position: absolute;
				content: '';
				top: -7rpx;
				right: 10rpx;
				width: 0;
				height: 0;
				border-top: 50px solid #f08329;
				border-right: 50px solid transparent;
				border-left: 50px solid transparent;
				transform: scale(0.15);
			}
		}
	}

	page {
		background-color: #ffffff !important;
	}
</style>